{% extends "templates/base.html" %}
{% set game_name = "Rostlinný lékař" %}
{% block content %}

<div id="appContainer" class="full-screen-app bg-light">

    <button id="fsBtn" class="btn btn-outline-secondary position-absolute top-0 end-0 m-3 shadow" style="z-index: 10050;" onclick="toggleFullscreen()">
        <i class="fa-solid fa-expand fa-2x"></i>
    </button>

    <!-- Zadání PINu nemocné dýně -->
    <div id="pinScreen" class="container d-flex flex-column justify-content-center align-items-center h-100">
        <h1 class="mb-4 text-center text-danger fw-bold">
            <i class="fa-solid fa-kit-medical"></i> Rostlinná ambulance
        </h1>
        <h4 class="mb-4 text-center text-secondary">Zadej tajný kód své nemocné nebo chřadnoucí dýně:</h4>
        
        <div class="d-flex justify-content-center gap-3 mb-4" id="pinDisplay">
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
        </div>

        <div class="d-flex flex-wrap justify-content-center gap-3 mb-4" style="max-width: 400px;">
            <button class="btn color-btn" style="background-color: red;" onclick="addPinColor('red')"></button>
            <button class="btn color-btn" style="background-color: blue;" onclick="addPinColor('blue')"></button>
            <button class="btn color-btn" style="background-color: green;" onclick="addPinColor('green')"></button>
            <button class="btn color-btn" style="background-color: yellow;" onclick="addPinColor('yellow')"></button>
            <button class="btn color-btn" style="background-color: purple;" onclick="addPinColor('purple')"></button>
            <button class="btn color-btn" style="background-color: orange;" onclick="addPinColor('orange')"></button>
        </div>

        <button class="btn btn-outline-danger btn-lg mt-2 px-4 shadow-sm" onclick="clearPin()">
            <i class="fa-solid fa-rotate-left"></i> Vymazat kód
        </button>
    </div>

    <!-- Kvíz pro uzdravení -->
    <div id="quizScreen" class="container py-4 flex-column h-100 d-none justify-content-center align-items-center text-center">
        <h2 id="quizDiagnosis" class="text-danger mb-4 fw-bold"><i class="fa-solid fa-stethoscope"></i> Diagnóza...</h2>
        <h3 id="quizQuestion" class="mb-5 px-3 fw-semibold">Zde bude zahradnická otázka?</h3>

        <div class="d-flex flex-column gap-3 w-100 px-3" style="max-width: 650px;" id="quizAnswers">
            <!-- Tlačítka odpovědí se doplní dynamicky -->
        </div>
        
        <button class="btn btn-outline-secondary mt-5 px-4 py-2" onclick="resetStation()">
            <i class="fa-solid fa-arrow-left"></i> Zpět na zadání kódu
        </button>
    </div>

    <!-- Výsledek léčby -->
    <div id="resultScreen" class="container py-4 flex-column h-100 d-none justify-content-center align-items-center text-center">
        <i id="resultIcon" class="fa-solid fa-circle-check text-success" style="font-size: 8rem;"></i>
        <h1 id="resultTitle" class="mt-4 display-4 fw-bold">Výsledek</h1>
        <h3 id="resultMessage" class="mt-3 text-secondary">Zpráva o stavu dýně...</h3>
        <div class="spinner-border text-secondary mt-5" id="resultSpinner" role="status"></div>
    </div>

</div>

<style>
    .full-screen-app { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; flex-direction: column; overflow: hidden; }
    body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    .color-btn { width: 90px; height: 90px; border-radius: 25px; border: 4px solid rgba(0,0,0,0.1); transition: transform 0.1s; }
    .color-btn:active { transform: scale(0.9); }
    .answer-btn { padding: 20px; font-size: 1.25rem; font-weight: 600; border-radius: 16px; border: 2px solid #dee2e6; background-color: white; transition: all 0.2s; white-space: normal; line-height: 1.4; }
    .answer-btn:hover { background-color: #f8f9fa; border-color: #0d6efd; }
    .answer-btn:active { transform: scale(0.97); }
    .bg-danger-flash { background-color: #f8d7da !important; transition: background-color 0.2s; }
    .bg-success-flash { background-color: #d1e7dd !important; transition: background-color 0.2s; }
</style>

<script>
    forrestHubLib = ForrestHubLib.getInstance(false); 
    const varPrefix = "flower_"; 
    
    let currentPin = [];
    let targetFlowerId = "";
    let targetFlowerData = null;
    let lastQuestion = "";

    const quizData = {
        water: [
            { 
                q: "Půda je promáčená a stojí v ní louže vody. Co se děje s kořeny dýně?", 
                options: [
                    {a: "Kořeny se dusí bez vzduchu a začnou uhnívat", c: true}, 
                    {a: "Dýně se promění v leknín", c: false}, 
                    {a: "Dýně začne plavat a odplave k sousedům", c: false}
                ] 
            },
            { 
                q: "Kdy a jak je v teplých dnech nejlepší dýni zalévat?", 
                options: [
                    {a: "Odstátou vodou přímo ke kořenům brzy ráno nebo večer", c: true}, 
                    {a: "Ledovou vodou shora na rozpálené listy v pravé poledne", c: false}, 
                    {a: "Slazenou limonádou jednou týdně", c: false}
                ] 
            }
        ],
        sun: [
            { 
                q: "Na dýni v poledne praží prudké slunce a její velké listy svěsily špičky. Co se stalo?", 
                options: [
                    {a: "Dýně má úpal a ztrácí vodu odparem, potřebuje zastínit", c: true}, 
                    {a: "Dýně spí a chrápe", c: false}, 
                    {a: "Z listů se stávají bonbony", c: false}
                ] 
            },
            { 
                q: "Jak může zahrádkář ochránit půdu pod dýní před prudkým vysycháním na slunci?", 
                options: [
                    {a: "Půdu zamulčuje vrstvou slámy nebo suchého listí", c: true}, 
                    {a: "Nasadí dýni sluneční brýle", c: false}, 
                    {a: "Postříká půdu parfémem", c: false}
                ] 
            }
        ],
        fertilizer: [
            { 
                q: "Do půdy se dostalo příliš mnoho umělého hnojiva najednou. Proč to dýni škodí?", 
                options: [
                    {a: "Vysoká koncentrace živin popálí jemné sací kořínky", c: true}, 
                    {a: "Dýně vyroste do nebe jako fazole z pohádky", c: false}, 
                    {a: "Dýně začne mluvit cizím jazykem", c: false}
                ] 
            },
            { 
                q: "Jaké je nejlepší přírodní hnojení pro zdravý a udržitelný růst obří dýně?", 
                options: [
                    {a: "Vyzrálý zahradní kompost a organický humus", c: true}, 
                    {a: "Rozdrcené čokoládové sušenky", c: false}, 
                    {a: "Plastové lahve a noviny", c: false}
                ] 
            }
        ],
        general: [
            { 
                q: "Který nezvaný návštěvník na zahradě nejraději ožírá mladé křehké listy dýně?", 
                options: [
                    {a: "Slimáci a plži", c: true}, 
                    {a: "Lední medvěd", c: false}, 
                    {a: "Klokan", c: false}
                ] 
            },
            { 
                q: "Jak poznáme, že je velká dýně zralá ke sklizni a vyřezávání na Halloween?", 
                options: [
                    {a: "Má pevnou tvrdou slupku, krásnou oranžovou barvu a stopka je dřevnatá", c: true}, 
                    {a: "Je modrá a měkká jako houbička na nádobí", c: false}, 
                    {a: "Sklízí se hned druhý den po zasetí", c: false}
                ] 
            }
        ]
    };

    function toggleFullscreen() {
        const el = document.documentElement;
        if (!document.fullscreenElement) {
            if (el.requestFullscreen) el.requestFullscreen();
            else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
        }
    }

    function addPinColor(color) {
        if (currentPin.length < 3) {
            currentPin.push(color);
            updatePinDisplay();
            if (currentPin.length === 3) checkPinInDatabase();
        }
    }

    function clearPin() { currentPin = []; updatePinDisplay(); }

    function updatePinDisplay() {
        const slots = document.querySelectorAll('.pin-slot');
        slots.forEach((slot, index) => {
            if (currentPin[index]) {
                slot.style.backgroundColor = currentPin[index];
                slot.classList.remove('bg-white');
            } else {
                slot.style.backgroundColor = '';
                slot.classList.add('bg-white');
            }
        });
    }

    async function checkPinInDatabase() {
        targetFlowerId = varPrefix + currentPin.join('_');
        try {
            let exists = await forrestHubLib.dbVarKeyExists(targetFlowerId);
            if (exists) {
                targetFlowerData = await forrestHubLib.dbVarGetKey(targetFlowerId);
                if (targetFlowerData.status !== "sick") {
                    forrestHubLib.uiShowAlert('success', 'Tvoje dýně je zdravá a silná! Běž se o ni dál starat na zahradu.', 4000);
                    setTimeout(clearPin, 2000);
                    return;
                }
                startQuiz();
            } else {
                forrestHubLib.uiShowAlert('danger', 'Tento kód dýně neexistuje.', 3000);
                setTimeout(clearPin, 1000); 
            }
        } catch (error) { clearPin(); }
    }

    function startQuiz() {
        let issue = "general";
        let diagnosisText = "Dýně chřadne a potřebuje pomoc";
        if (targetFlowerData.water > 100) { issue = "water"; diagnosisText = "Uhnívající kořeny (přelitá půda)"; }
        else if (targetFlowerData.sun > 100) { issue = "sun"; diagnosisText = "Spálené listy a úpal (přemíra slunce)"; }
        else if (targetFlowerData.fertilizer > 100) { issue = "fertilizer"; diagnosisText = "Popálené výhonky (přehnojená půda)"; }
        
        const pool = quizData[issue];
        let questionObj;
        do { questionObj = pool[Math.floor(Math.random() * pool.length)]; } while (questionObj.q === lastQuestion && pool.length > 1);
        lastQuestion = questionObj.q;

        let options = [...questionObj.options];
        options.sort(() => Math.random() - 0.5);
        
        document.getElementById('quizDiagnosis').innerHTML = `<i class="fa-solid fa-stethoscope"></i> ${diagnosisText}`;
        document.getElementById('quizQuestion').innerText = questionObj.q;
        
        const answersDiv = document.getElementById('quizAnswers');
        answersDiv.innerHTML = '';
        options.forEach(opt => {
            const btn = document.createElement('button');
            btn.className = "answer-btn shadow-sm";
            btn.innerText = opt.a;
            btn.onclick = () => handleAnswer(opt.c);
            answersDiv.appendChild(btn);
        });
        
        document.getElementById('pinScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('quizScreen').classList.replace('d-none', 'd-flex');
    }

    async function handleAnswer(isCorrect) {
        document.getElementById('quizScreen').classList.replace('d-flex', 'd-none');
        const resScreen = document.getElementById('resultScreen');
        resScreen.classList.replace('d-none', 'd-flex');
        const icon = document.getElementById('resultIcon');
        const title = document.getElementById('resultTitle');
        const msg = document.getElementById('resultMessage');
        
        if (isCorrect) {
            targetFlowerData.status = "ok";
            if (targetFlowerData.water > 100) targetFlowerData.water = 50;
            if (targetFlowerData.sun > 100) targetFlowerData.sun = 50;
            if (targetFlowerData.fertilizer > 100) targetFlowerData.fertilizer = 50;
            
            try {
                await forrestHubLib.dbVarSetKey(targetFlowerId, targetFlowerData);
                icon.className = "fa-solid fa-wand-magic-sparkles text-success";
                title.innerText = "Léčba úspěšná!";
                title.className = "mt-4 display-4 fw-bold text-success";
                msg.innerText = "Dýně se uzdravila a může pokračovat v růstu na záhoně!";
                appContainer.classList.add('bg-success-flash');
            } catch (e) { title.innerText = "Chyba připojení k serveru!"; }
        } else {
            icon.className = "fa-solid fa-circle-xmark text-danger";
            title.innerText = "Špatná diagnóza!";
            title.className = "mt-4 display-4 fw-bold text-danger";
            msg.innerText = "To dýni nepomůže. Poraď se v týmu a zkus to znovu!";
            appContainer.classList.add('bg-danger-flash');
        }
        setTimeout(() => { appContainer.classList.remove('bg-danger-flash', 'bg-success-flash'); resetStation(); }, 5000);
    }

    function resetStation() {
        clearPin();
        targetFlowerId = ""; targetFlowerData = null;
        document.getElementById('quizScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('resultScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('pinScreen').classList.replace('d-none', 'd-flex');
    }
</script>
{% endblock %}